<template>
  <div class="container page">
    <van-nav-bar
        title="打赏详情"
        left-arrow
    />
    <div class="content_head">
      <div class="content_head_top">
        <div class="van-image content_head_top_logo" style="width: 2.5rem; height: 1.41rem;">
          <img :src="require('../../assets/img/tip/tcsj.png')" class="van-image__img" style="object-fit: cover;">
          </div>
        <div class="content_head_top_name">上门服务</div>
        <div class="content_head_top_period">第202409100013期</div>
      </div>
      <div class="content_head_bottom">
        <div class="content_head_bottom_wrapper"><span
            class="content_head_bottom_wrapper_status_text font_grey">150</span><span
            class="content_head_bottom_wrapper_text">打赏积分</span></div>
        <div class="content_head_bottom_line"></div>
        <div class="content_head_bottom_wrapper"><span
            class="content_head_bottom_wrapper_status_text font_red">300</span><span
            class="content_head_bottom_wrapper_status_text font_red">已获积分</span></div>
      </div>
    </div>
    <div class="division"></div>
    <div class="content_wrapper">
      <div class="content_wrapper_head">
        <div class="content_wrapper_head_text">打赏内容</div>
      </div>
      <div class="content_wrapper_cell">
        <div class="content_wrapper_cell_label">正确打赏:</div>
        <div class="content_wrapper_cell_content">
          <div class="kuaisan-ball left">
            <span class="res-des middle">直升机</span>
            <span class="res-des middle">保时捷</span>
          </div>
        </div>
      </div>
      <div class="content_wrapper_cell">
        <div class="content_wrapper_cell_label">订单号码:</div>
        <div class="content_wrapper_cell_content">
          <div class="content_wrapper_cell_content_normal">1833182197809545200</div>
        </div>
      </div>
      <div class="content_wrapper_cell">
        <div class="content_wrapper_cell_label">打赏内容:</div>
        <div class="content_wrapper_cell_content">
          <div class="content_wrapper_cell_content_normal">糖心</div>
        </div>
      </div>
      <div class="content_wrapper_cell">
        <div class="content_wrapper_cell_label">打赏时间:</div>
        <div class="content_wrapper_cell_content">
          <div class="content_wrapper_cell_content_normal">2024-09-10 00:34:29</div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer_wrapper">
        <div class="footer_wrapper_text">再来一单</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "RecordDetail",
  data: function () {
    return {}
  }
};
</script>
<style scoped>
::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title, ::v-deep .van-cell__title {
  color: var(--van-nav-bar-icon-color);
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fcf0fa
}

.container .nav {
  background: linear-gradient(270deg,#fff,#fff)
}

.container .nav .van-nav-bar__text {
  color: #fff
}

.container .content_head {
  padding: 0 .26667rem
}

.container .content_head .content_head_bottom {
  display: flex;
  flex-direction: row;
  height: 2.13333rem;
  align-items: center
}

.container .content_head .content_head_bottom .content_head_bottom_line {
  width: .016rem;
  height: 40%;
  background-color: #f2f2f5
}

.container .content_head .content_head_bottom .content_head_bottom_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1
}

.container .content_head .content_head_bottom .content_head_bottom_wrapper .content_head_bottom_wrapper_status_text {
  font-size: .53333rem;
  font-weight: 700;
  color: #000
}

.container .content_head .content_head_bottom .content_head_bottom_wrapper .content_head_bottom_wrapper_text {
  color: #979799;
  font-size: .37333rem;
  font-weight: 700;
  margin-top: .13333rem
}

.container .content_head .content_head_top {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: .02667rem solid #f2f2f5;
  padding: .13333rem 0
}

.container .content_head .content_head_top .content_head_top_logo {
  width: 1.33333rem;
  height: 1.33333rem
}

.container .content_head .content_head_top .content_head_top_name {
  color: #fa59b5;
  font-size: .48rem;
  font-weight: 700;
  margin: .21333rem 0
}

.container .content_head .content_head_top .content_head_top_period {
  color: #979799;
  font-size: .32rem
}

.container .division {
  height: .13333rem;
  background-color: #f2f2f5
}

.container .content_wrapper {
  padding: 0 .26667rem
}

.container .content_wrapper .content_wrapper_head {
  height: 1.33333rem;
  display: flex;
  justify-items: center;
  align-items: center;
  color: #000
}

.container .content_wrapper .content_wrapper_head .content_wrapper_head_text {
  font-size: .42667rem;
  font-weight: 700
}

.container .content_wrapper .content_wrapper_cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: .13333rem 0
}

.container .content_wrapper .content_wrapper_cell .content_wrapper_cell_content {
  display: flex;
  flex: 1;
  padding: 0 .4rem
}

.container .content_wrapper .content_wrapper_cell .content_wrapper_cell_content .content_wrapper_cell_content_normal {
  font-size: .42667rem;
  color: #000
}

.container .content_wrapper .content_wrapper_cell .content_wrapper_cell_label {
  color: #000;
  font-size: .32rem
}

.container .content_wrapper .content_wrapper_cell .shopMall-result-div span {
  font-size: .4rem;
  margin-right: .13333rem;
  color: #000
}

.container .footer {
  background-color: #fcf0fa
}

.container .footer .footer_wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: .61333rem;
  height: 1.17333rem;
  margin: .4rem;
  overflow: hidden;
  background: linear-gradient(270deg,#fa59b5,#e38afb)
}

.container .footer .footer_wrapper .footer_wrapper_text {
  color: #000;
  font-size: .42667rem
}

.container .font_black {
  color: #000
}

.container .font_grey {
  color: #979799
}

.container .font_red {
  color: #dc2037
}

.kuaisan-ball {
  flex: 1;
  display: flex;
  align-items: center
}

.kuaisan-ball.left {
  justify-content: flex-start
}

.kuaisan-ball.center {
  justify-content: center
}

.kuaisan-ball.right {
  justify-content: right
}

.kuaisan-ball .res-ball {
  border-radius: 50%;
  background-color: #ff253f;
  text-align: center;
  color: #fff;
  margin-right: .13333rem;
  width: .64rem;
  height: .64rem;
  line-height: .64rem;
  font-size: .37333rem
}

.kuaisan-ball .res-img.middle {
  width: .74667rem;
  height: .74667rem;
  margin-right: .26667rem
}

.kuaisan-ball .res-img.small {
  width: .58667rem;
  height: .58667rem;
  margin-right: .13333rem
}

.kuaisan-ball .res-img.xs {
  width: .53333rem;
  height: .53333rem;
  margin-right: .13333rem
}

.kuaisan-ball .res-des {
  font-weight: 700;
  text-align: center;
  color: #fa59b5
}

.kuaisan-ball .res-des.middle {
  font-size: .4rem;
  margin: 0 .05333rem
}

.kuaisan-ball .res-des.small {
  width: 18%;
  margin: 0 .08rem;
  font-size: .34667rem
}

.kuaisan-ball .res-des.xs {
  min-width: 10%;
  font-size: .29333rem
}
</style>
